<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48" @keyup.enter.native="searchList">
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="搜索名称">
                <a-input v-model="queryParam.search" placeholder="请输入支付流水、订阅编号、手机号" allowClear />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="支付类型">
                <a-select v-model="queryParam.type" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="0">支付</a-select-option>
                  <a-select-option :value="1">退款</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="支付方式">
                <a-select v-model="queryParam.way" placeholder="请选择" default-value="null" :getPopupContainer="triggerNode => triggerNode.parentNode">
                  <a-select-option value="">不限</a-select-option>
                  <a-select-option :value="item.id" v-for="item of wayList" :key="item.id">{{ item.text }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="开始时间">
                <a-date-picker style="width: 100%" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" showToday v-model="queryParam.startTime" @change="searchList" />
              </a-form-item>
            </a-col>
            <a-col :xxl="6" :lg="8" :md="12" :sm="24">
              <a-form-item label="结束时间">
                <a-date-picker style="width: 100%" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" showToday v-model="queryParam.endTime" @change="searchList" />
              </a-form-item>
            </a-col>
            <a-col :xxl="18" :lg="8" :md="12" :sm="24">
              <span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button type="primary" @click="searchList">查询</a-button>
                <a-button style="margin-left: 8px" @click="resetList">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps" :scroll="{ x: 1800 }">
        <span slot="type" slot-scope="text">{{ text | orderType }}</span>
        <span slot="way" slot-scope="text">{{ text | subWay }}</span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">查看</a>
          <a-divider type="vertical" />
          <a-button type="link" style="padding:0" :disabled="true" v-if="record.wxvstate != 2">撤销</a-button>
          <a-popconfirm title="是否撤销该支付分订单?" ok-text="Yes" cancel-text="No" @confirm="handleCancel(record)" v-else>
            <a>撤销</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <a-button type="link" style="padding:0" :disabled="true" v-if="record.wxvstate != 2">完结</a-button>
          <a-popconfirm title="是否完结该支付分订单?" ok-text="归还" cancel-text="未还" @confirm="handleFinish(record, true)" @cancel="handleFinish(record, false)" v-else>
            <a>完结</a>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
    <SubOrderDetailModal ref="detailModal"></SubOrderDetailModal>
  </div>
</template>
<script>
import { listMixin } from './listMixin'
import { subscribeOrderList, finishBill, cancelBill } from '@/api/box/marketing'
import SubOrderDetailModal from './modules/subOrderDetailModal'
import './filter.js'
import { subType } from './filter.js'
const columns = [
  { title: '支付流水号', width: 190, align: 'center', fixed: 'left', dataIndex: 'tradeNo' },
  { title: '支付类型', width: 90, dataIndex: 'type', align: 'center', fixed: 'left', scopedSlots: { customRender: 'type' } },
  { title: '订阅编号', width: 180, align: 'center', dataIndex: 'subSn', fixed: 'left' },
  { title: '昵称', align: 'center', dataIndex: 'nickName' },
  { title: '手机号', dataIndex: 'phone', align: 'center' },
  { title: '付款方式', dataIndex: 'way', align: 'center', scopedSlots: { customRender: 'way' } },
  { title: '邀请码', dataIndex: 'inviteCode', align: 'center' },
  { title: '商品金额(元)', dataIndex: 'productPrice', align: 'center', customRender: text => `¥${text}` },
  {
    title: '支付/退款金额(元)',
    align: 'center',
    dataIndex: 'payPrice',
    customRender: (text, record) => (record.type == 1 ? (record.refundAmout == null ? '0' : `-¥${record.refundAmout}`) : text == null ? 0 : `¥${text}`)
  },
  {
    title: '支付/退款积分',
    align: 'center',
    dataIndex: 'payPoint',
    customRender: (text, record) => (record.type == 1 ? (record.refundAmout == null ? '0' : `-${record.refundAmout}`) : text == null ? '' : text == null ? 0 : `${text}`)
  },
  { title: '支付/退款时间', dataIndex: 'createTime', align: 'center' },
  { title: '操作', width: 160, fixed: 'right', align: 'center', scopedSlots: { customRender: 'action' } }
]
export default {
  mixins: [listMixin],
  data() {
    return {
      columns,
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => this.fetchData(parameter),
      queryParam: {
        type: '',
        way: ''
      },
      wayList: []
    }
  },
  components: {
    SubOrderDetailModal
  },
  created() {
    Object.keys(subType).forEach(i => {
      let item = {
        id: i,
        text: subType[i].text
      }
      this.wayList.push(item)
    })
    console.log(this.wayList)
  },
  methods: {
    async fetchData(parameter) {
      let formValue = this.filterFields(this.queryParam)
      let params = {
        page: parameter,
        requestData: formValue
      }
      let res = await this.fetchList(params, subscribeOrderList)

      if (res.code == 0) {
        return {
          data: res.data,
          page: res.page
        }
      } else {
        this.$message.warning(res.msg)
        return {
          data: [],
          page: {
            pageNo: 0,
            count: 0,
            pageSize: 10
          }
        }
      }
    },
    filterFields(values) {
      const formValue = {}
      Object.keys(values).forEach(i => {
        if (values[i] !== '' && values[i] !== undefined && values[i] !== null) {
          formValue[i] = values[i]
        }
      })
      return formValue
    },
    handleCancel(record) {
      let params = {
        requestData: {
          orderId: record.id
        }
      }
      cancelBill(params).then(res => {
        if (res.code == 0) {
          this.$message.success('撤销成功！')
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleFinish(record, returned) {
      let params = {
        requestData: {
          orderId: record.id,
          returned: returned
        }
      }
      finishBill(params).then(res => {
        if (res.code == 0) {
          this.$message.success('完结成功！')
          this.$refs.table.refresh()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleEdit(record) {
      this.$refs.detailModal.show(record)
    }
  }
}
</script>

